<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>轨迹动画图</title>
    <script include="jquery,omnivore" src="./static/libs/include-lib-local.js"></script>
    <script include="timedimension" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #test {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="test"></div>
<script>
    var startDate = new Date();
    startDate.setUTCHours(0, 0, 0, 0);

    var map = L.map('test', {
        crs: L.CRS.EPSG4326,
        fullscreenControl: true
    }).setView([25.29, 104.28], 10);
    var layer1 = new Zondy.Map.TDTLayer({
        layerType: 'vec',
        minZoom: 0,
        maxZoom: 15,
        token: "4c27d6e0e8a90715b23a989d42272fd8",
        noWrap: true
    });
    var layer2 = new Zondy.Map.TDTLayer({
        layerType: 'cva',
        minZoom: 0,
        maxZoom: 15,
        token: "4c27d6e0e8a90715b23a989d42272fd8",
        noWrap: true
    });
    var LayerG = L.layerGroup([layer1, layer2]);
    LayerG.addTo(map);


    // 1.开始手动实例化timeDimension
    var timeDimension = new L.zondy.TimeDimension({
        period: "PT5M",
    });
    // 2.在所有图层中共享timeDimension对象
    map.timeDimension = timeDimension;
    // 否则，必须在所有图层中设置“timeDimension”选项
    // 3.创建播放器
    var player = new L.zondy.TimeDimensionPlayer({
        transitionTime: 100,
        loop: false,
        startOver: true
    }, timeDimension);
    // 4.将播放器player放入timeDimensionControl控制器中
    var timeDimensionControlOptions = {
        player: player,
        timeDimension: timeDimension,
        position: 'bottomleft',
        autoPlay: true,
        minSpeed: 1,
        speedStep: 0.5,
        maxSpeed: 15,
        timeSliderDragUpdate: true
    };
    // 5.将timeDimensionControl添加到地图中
    var timeDimensionControl = new L.zondy.TimeDimensionControl(timeDimensionControlOptions);
    map.addControl(timeDimensionControl);

    var icon = L.icon({
        iconUrl: './static/data/picture/marker/running.png',
        iconSize: [22, 22],
        iconAnchor: [5, 25]
    });

    var geojson = {};
    $.get('./static/data/geojson/line-string.json', function (res) {
        geojson = initGeojson(res);
        var geoJSONLayer = L.geoJSON(geojson, {
            pointToLayer: function (feature, latLng) {
                if (feature.properties.hasOwnProperty("last")) {
                    return new L.Marker(latLng, {
                        icon: icon,
                    });
                }
                return L.circleMarker(latLng);
            },
        });
        var gpxTimeLayer = L.zondy.TimeDimensionLayerGeoJson(geoJSONLayer, {
            updateTimeDimension: true,
            duration: "PT2M",
            updateTimeDimensionMode: "replace",
            addlastPoint: true,
        });
        gpxTimeLayer.addTo(map);
    });

    //注意：geojson数据中要有times和播放器建立链接
    function initGeojson(geojson) {
        let date = new Date();
        let timestamp = date.getTime();
        geojson.properties.times = [];
        geojson.geometry.coordinates = geojson.geometry.coordinates.map(
            (point) => {
                ++timestamp;
                geojson.properties.times.push(timestamp);
                return point;
            }
        );
        return geojson;
    }
</script>
</body>

</html>